<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>用户配置</title>
<script type="text/javascript" th:src="@{/js/userConfig/userConfig.js}"></script>
<style>
	.el-transfer {padding-left: 55px !important;}
	.el-transfer-panel{width:350px !important; }
</style>
</head>
<body>

	<div id="head_app">
		<el-breadcrumb separator-class="el-icon-arrow-right"> 
			<el-breadcrumb-item :to="{ path: '/' }">管理列表</el-breadcrumb-item> 
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-button  type="primary" plain id="user_controller_btn" style="display:none;">
			   other
		</el-button>
	</div>
	
	<br>
	
	<div id="user_app">
		<template>
		    <el-table v-loading="loading" :data="tableData" style="width: 100%" height="465">
		      <el-table-column prop="userName" label="姓名" width="120">
		      </el-table-column>
		      <el-table-column prop="userCode" label="员工号" width="120">
		      </el-table-column>
		      <el-table-column prop="email" label="邮箱地址" width="280">
		      </el-table-column>
		      <el-table-column prop="phone" label="手机" width="180">
		      </el-table-column>
		      
		      <el-table-column label="操作" >
				  <template scope="scope">
					
					<!-- 弹窗 --> 
				<el-popover  ref="popover4" placement="left" width="600" trigger="click" class="demo-input-suffix">
				 <el-form :inline="false" :model="userConfigUpdate" ref="userConfigUpdate" label-position="right" size="small" :rules="rules">
					<el-form-item label="姓名" prop="userName">
						<el-col :span="15">
  							<el-input placeholder="请输入姓名" v-model="scope.row.userName"></el-input>
  						</el-col>
					</el-form-item>
					<el-form-item label="员工号" prop="userCode">
						<el-col :span="15">
  							<el-input placeholder="请输入员工号" v-model="scope.row.userCode"></el-input>
  						</el-col>
					</el-form-item>
					<el-form-item label="邮箱地址" prop="email">
						<el-col :span="15">
	  						<el-input placeholder="请输入邮箱地址" v-model="scope.row.email"></el-input>
	  					</el-col>
					</el-form-item>
					<el-form-item label="手机号码" prop="phone">
						<el-col :span="15">
	  						<el-input placeholder="请输入手机号码" v-model="scope.row.phone"></el-input>
	  					</el-col>
					</el-form-item>
  				</el-form>
  				<span class="dialog-footer">
					    <el-button size="mini" type="primary" @click="updateForm('userConfigUpdate',scope.row)">确定</el-button>
					    <el-button size="mini" type="primary" @click="closePopper()">取消</el-button>
					</span>
				</el-popover>
			          <el-button  type="primary" size="mini" plain v-popover:popover4 @click="fullForm(scope.row)">
			          		修改
			          </el-button>
			          <el-button  type="primary" size="mini" plain @click="updateRole(scope.row.id)">
			          		用户角色配置
			          </el-button>
			          <el-button type="danger" size="mini" plain @click.native.prevent="handleDelete(scope.$index, scope.row,tableData)">
			        		  删除<i class="el-icon-delete2 el-icon--right"></i>
			          </el-button> 
			        </template>
			  </el-table-column>
		    </el-table>
		    
		    <!-- 新增弹窗 使用dialog方式  fullscreen -->
		   <div>
				<el-dialog title="修改用户角色" :visible.sync="dialogAdd" center width="70%"  >
			    	<el-transfer  filterable :filter-method="filterMethod" filter-placeholder="请输入角色名称" :titles="['所有角色', '已选角色']" v-model="transferRData" :data="transferLData" ></el-transfer>
					
					<div style="padding-top:10px; text-align:center">
					    <el-button size="mini" type="primary" @click="addConfigList()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
			    </el-dialog>
		    </div>
		    
		    
		    <div class="block">
		    	<el-pagination 
		    		background
		    		@size-change="handleSizeChange" 
		    		@current-change="handleCurrentChange" 
		    		:current-page="currentPage" 
		    		:page-sizes="[3,5,10]" 
		    		:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" 
		    		:total="totalSize">
    			</el-pagination>
		    </div>
		    
		  </template>
		</div>
		
</body>
</html>